<template>
  <div class="bookfullinfo">
    <div class="showinfo">
      <img :src=this.bookpicurl >
      <h2 id="name">{{bookname}} </h2>
      <h4 id="bookid">书籍ID：{{mymy}}</h4>
      <h4 id="auther">作者：{{bookauthor}}</h4>
      <h4 id="price">价格：{{bookprice}}</h4>
      <h5 id="intro">书籍介绍：{{bookintro}}</h5>
      <input id="showcommet" type="button" value="展示评论" >
      <div class="comment" >
        <div v-for="(co,i) in this.comment">
          <h4>{{i+1}}</h4>
          <h3>{{co}}</h3>

        </div>
        <input type="button" value="111" @click="change_com">
        <div v-for="(va,ke) in this.comments">
          <h4>{{ke}}:</h4>
          <h3>{{va}}</h3>
        </div>

      </div>
    </div>
    <div class="tocart">
      <p>当前选择数量：{{counter}}</p>
      <input id="add" type="button" value="+" @click="add_counter">
      <input id="dis" type="button" value="-" @click="dis_counter">
      <br>
      <input id="buynow" type="button" value="立即购买" @click="buy_now">
      <input id="addbooktocart" type="button" value="加入购物车" @click="add_to_payment_cart">

    </div>


  </div>


</template>

<script>
  import Mock from 'mockjs'
  import axios from 'axios'
    export default {
        name: "bookinfo.vue",
        created(){

        },
        data(){
          return{
            'bookurl':Mock.mock('@image(200x300)'),
            'bookname':"《"+Mock.mock('@name')+"》",
            'bookauthor':Mock.mock('@cname'),
            'bookid':11,
            'bookprice':Mock.mock('@int(20,80)'),
            'bookintro':Mock.mock('@cparagraph'),
            'counter':0,
            'comments':['commentv 1','comment 2','bbokk3'],

          }
        },
        methods:{
          change_com(){

            let uin = axios.create({
              baseURL:'http://123.207.32.32:8000',
              timeout:5000
            });
            uin.interceptors.request.use(con=>{
              console.log(con.data);
              //alert('GET IT');
              return con;
            },err=>{
              console.log(err);
            })
            uin({
              url:'/category'
            }).then(res =>{
              /*this.comments= JSON.parse(res);*/
              console.log(res);

              this.comments=res.data;
              //alert(typeof res.data)
              /*this.comments=res.parseJSON();*/
            },err=>{
              console.log(err);
            });


          },
          show_comment(){
            alert("show comment");
          },
          add_counter(){
            this.counter+=1;
          },
          dis_counter(){
            this.counter-=1;
          },
          buy_now(){
            let count=this.counter;
            let id=this.bookid;
            let buynowinfo={
              count: count,
              buybookid:id,
            };
            let send_info=JSON.stringify(buynowinfo);
            //send out send_info to back-end
            alert(send_info);
          },
          add_to_payment_cart(){
            let count=this.counter;
            let id=this.bookid;
            let buynowinfo={
              count: count,
              buybookid:id,
            };
            //add the book into cart
            let send_add_cart=JSON.stringify(buynowinfo);
            alert(send_add_cart);
          },
        },
      computed:{
          mymy(){
            return this.$route.params.bookid;
          },
          bookpicurl(){
            //return '../../static/bookpic/'+Mock.mock('@int(1,44)')+'.jpg';
            return '../../static/bookpic/'+this.mymy+'.jpg';
          },
          comment(){
            let com_list=[];
            for(let i=1;i<=5;i++){
              let com =Mock.mock('@sentence');
              com_list.push(com);
            }
            return com_list;
          },




      },
    }

</script>

<style scoped>
  .comment{
    display: inline;
  }
  .tocart #dis{

  }

</style>
